<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

import {showToast} from 'vant';
import headerUtil from "./base/common/headerUtil.vue";
import bottomTabUtil from "./base/common/bottomTabUtil.vue";

import reqApis from "../req/reqApis.js";

const currentData = ref<any>({
  searchContent: "",
  show: false,
  headerObj: {
    showType: 2
  },
  friendList: []
});

const onClickButton = () => {
  reqApis.findFriendsApi({content: currentData.value.searchContent}).then(res => {
    currentData.value.friendList = res.data;
  });
}

const addFriendFn = (friendId:any, index:any) => {
  reqApis.addFriendApi({userId: friendId}).then(res => {
    showToast("添加成功");
    currentData.value.friendList.splice(index, 1);
  })
  console.log("!123132")
}


</script>
<template>
  <section class="search">
    <headerUtil :obj="currentData.headerObj">添加好友</headerUtil> 
    <van-search
      v-model="currentData.searchContent"
        show-action
        placeholder="请输入搜索关键词">
      <template #action>
        <div class="searchTxt" @click="onClickButton">搜索</div>
      </template>
    </van-search>

    <div class="content pd">
      <van-swipe-cell class="cell-wrap" v-for="(item, index) in currentData.friendList" :key="index">
        <div class="friend-item">
          <div class="face" :style="{background: `url(${item.avatar}) no-repeat center`}"></div>
          <div class="name">{{item.nickName}}</div>
        </div>
        <template #right>
          <van-button @click="addFriendFn(item.userId)" square text="申请好友" type="primary" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
  </section>
</template>

<style lang="less" scoped>
.wrapper {
  margin: .1rem .1rem 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: end;
  height: 100%;
}

.block {
  width: 1.4rem;
  // height: 1.8rem;
  background-color: #fff;
  border-radius: .1rem;
  padding:.1rem;
  .block-item {
    height: .2rem;
    line-height: .2rem;
    font-size: .2rem;
  }
}
.searchTxt {
  font-size: .16rem;
}
.search {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .pd {
    padding-top: .1rem;
  }
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
        display: none;
    }
    .cell-wrap {
      margin-bottom: .1rem;
    }
    .friend-item {
      padding: 0 .1rem;
      height: .6rem;
      background:#dad0d0;
      display: flex;
      align-items: center;
      .face {
        width: .45rem;
        height: .45rem;
        background-size: cover !important;
        border-radius: 50%;
      }
      .name {
        padding-left: .1rem;
        font-size: .18rem;
      }
    }
    .delete-button {
      height: 100%;
    }
  }
  
}
</style>
